<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/subhome.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/loading.css" />-->
		<style type="text/css">
			[v-cloak] {
				display: none!important;
			}
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<!--首页推荐模块-->
		<div id="refreshContainer">
			<div class="mui-content mui-card" id="mui-home-tj">
				<div class="mui-slider">
					<div class="mui-slider-group" id="mui-home-slider">
						<!--<div class="mui-slider-item" v-for="its in listOnlineObj.items">
						<ul class="mui-table-view mui-grid-view">
							<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in its">
								<a href="javascript:;" :data-name="item.subject" :data-meetingId="item.id">
									<span v-if="item.status==3" class="mui-tj-cls cls1">直播</span>
									<span v-else class="mui-tj-cls cls2">预约</span>
									<img class="mui-media-object" v-bind:src="item.room.snapAccessUrl">
									<div class="mui-media-body">{{item.subject}}</div>
								</a>
							</li>
						</ul>
					</div>-->
					</div>
				</div>
			</div>
			<div class="mui-content" id="mui-home-list" v-cloak>
				<div v-if="listMeetingObj.items.length != 0" v-for="(item ,index) in listMeetingObj.items" v-show="item.status == 4" class="mui-card">
					<div class="mui-card-header mui-card-media" style="padding:10px">
						<div class="mui-media-body mui-navtitle">
							<h5>{{item.subject}}</h5>
						</div>
					</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner mui-card-media">
							<a href="javascript:;" :data-meetingId="item.id" :data-status="item.isOpen==true ? 0:1" :data-password="item.password">
								<img v-bind:src="item.snapUrl" onerror="this.src='images/32noimg.png'" width="100%" height="100%" />
							</a>
						</div>
						<div class='mui-card-footer' style="padding:10px 15px 0px 0px">
							<div class="mui-pull-left mui-tips"><span class="mui-badge mui-badge-purple mui-icon mui-icon-extra mui-icon-extra-peoples">&nbsp;{{item.personCount}}</span> </div>
							<div class="mui-pull-left mui-tips"><span class="mui-badge mui-badge-purple mui-icon-extra mui-icon-extra-like">&nbsp;{{item.likeCount}}</span></div>
						</div>
					</div>
				</div>
				<div v-else class="mui-card">
					<div class="mui-card-header mui-card-media" style="padding:10px">
						<div class="mui-media-body mui-navtitle">
							<h5 style="text-align: center;">暂无数据</h5>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/server.js"></script>
<script type="text/javascript">
	mui.init({
		pullRefresh: {
			container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			down: {
				style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				height: '50px', //可选,默认50px.下拉刷新控件的高度,
				range: '100px', //可选 默认100px,控件可下拉拖拽的范围
				offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
				auto: false, //可选,默认false.首次加载自动上拉刷新一次
				callback: pullrefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			}
		}
	});

	window.addEventListener("myfresh", function(e) {
		location.reload();
	});

	var homelist;
	var first = false;
	//	预约和直播会议数据对象
	var listOnlineObj = {};

	//	历史会议列表数据对象
	var listMeetingObj = {};

	//	直播列表数据参数
	var meetingPagerobj = {
		'offset': 0,
		'limit': 5,
		'recommend': '',
		'begin': '',
		'end': '',
		'status': '4'
	}

	//	打开新窗口
	function onPenView(mid, uid, channel) {
		mui.openWindow({
			url: 'detail.html',
			id: 'detail',
			styles: {
				hardwareAccelerated: true
			},
			//	自定义扩展参数，可以用来处理页面间传值 *：若目标窗口为预加载页面，则通过mui.openWindow方法打开时传递的extras参数无效。
			extras: {
				"meetingid": mid,
				"userid": uid,
				"channel": channel
			},
			createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			show: {
				autoShow: true, //页面loaded事件发生后自动显示，默认为true
				aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“；
				duration: 500, //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
				hardwareAccelerated: true //开启硬件加速
			},
			waiting: {
				autoShow: true, //自动显示等待框，默认为true
				title: '正在加载...', //等待对话框上显示的提示内容
				width: '100%', // 默认不设置时按100%计算
				height: '100%'
			}
		});
	};

	var userinfo = server.user.getLoginUser();
	initData();

	//	初始化首页数据
	function initData() {
		server.meeting.getOnline(function(r) {
			//	构建格式返回成对应的mui-slider组件
			var list = new Array();
			var groupCount = Math.ceil(r.length / 2);
			for(var i = 0; i < groupCount; i++) {
				var temps = new Array();
				temps.push(r[i + i]);
				if(i + i + 1 <= r.length - 1) {
					temps.push(r[i + i + 1]);
				}
				list.push(temps);
			}

			var templetUl = '';
			for(var i = 0; i < list.length; i++) {
				var templetLi = '';
				for(var j = 0; j < list[i].length; j++) {
					var status = list[i][j].status == 3 ? '<span class="mui-tj-cls cls1">直播</span>' : '<span class="mui-tj-cls cls2">预约</span>';
					templetLi += '<li class="mui-table-view-cell mui-media mui-col-xs-6">' +
						'<a href="javascript:;" data-name="' + list[i][j].subject + '" data-meetingid="' + list[i][j].id + '" data-password="' + list[i][j].password + '" data-status="' + (list[i][j].isOpen ? 0 : 1) + '"  data-channel="' + list[i][j].room.channel + '">' + status + '<img src="' + list[i][j].room.snapAccessUrl + '" onerror="errorImg(this)"  class="mui-media-object">' +
						'<div class="mui-media-body">' + list[i][j].subject + '</div></a></li>';
				}
				templetUl += '<div class="mui-slider-item"><ul class="mui-table-view mui-grid-view">' + templetLi + '</ul></div>';
			}
			document.getElementById("mui-home-slider").innerHTML = templetUl;
			mui('.mui-slider').slider();
		}, function() {

		});

		//	获取历史会议数据
		server.meeting.getHistory(meetingPagerobj, function(r) {
			if(!first) {
				listMeetingObj = {
					total: r.total,
					items: r.rows
				};
				homelist = new Vue({
					el: "#mui-home-list",
					data: listMeetingObj,
					/*created() {
						document.body.removeChild(document.getElementById('Loading'));
					}*/
				});
				first = true;
			} else {
				setTimeout(function() {
					homelist.items = r.rows;
				}, 500)
			}
		}, function(r) {
			mui.toast('服务器错误,请稍后刷新重试');
		});
	};

	mui.plusReady(function() {

		//	获取本地应用资源版本号
		plus.runtime.getProperty(plus.runtime.appid, function(info) {
			var appVer = info.version;
			//var appVer = '1.0.1';
			var mtype = mui.os.android == true ? '1' : '2'; //plus.os.name 1,android 2,ios

			console.log('appVer:' + appVer);
			server.serverconfig.checkAppVersion(mtype, appVer, function(r) {
				console.log('r' + JSON.stringify(r));
				switch(r.errCode) {
					case 0:
						mui.confirm('是否下载新版本？', '温馨提示', '', function(e) {
							if(e.index == 1) {
								switch(plus.os.name) {
									case 'Android':
										//	查找更新下载APP目录是否有下载文件，存在则删除
										plus.io.resolveLocalFileSystemURL(
											'_downloads/update/',
											function(entry) {
												//	成功时回调：删除已存在的文档
												entry.removeRecursively(function() {
													//mui.toast('删除成功');
													console.log('删除当前目录相关文档');
												});
											},
											function(e) {
												console.log('当前目录暂无文档信息');
											}
										)

										plus.nativeUI.showWaiting("安装包下载中...");
										plus.downloader.createDownload(r.data.url, {
											filename: "_downloads/update/"
										}, function(d, status) {
											if(status == 200) {
												console.log("下载APP成功：" + d.filename);
												installApp(d.filename); // 安装APP包
											} else {
												console.log("下载APP失败！");
												plus.nativeUI.alert("下载APP失败！");
											}
											plus.nativeUI.closeWaiting();
										}).start();
										break;
									default:
										//mui.toast('下载IOS版本');
										window.location.href = 'https://itunes.apple.com/cn/app/%E5%85%9A%E5%91%98%E7%9B%B4%E6%92%AD%E9%97%B4/id1384341559';
										break;
								}
							}
						}, 'div');
						break;
					case 4005:
						//mui.toast(r.errMsg);
						break;
					default:
						break;
				}
			}, function(r) {
				mui.toast(r.errMsg);
			})

		});

		//	直播、预约会议
		mui('#mui-home-tj').on('tap', 'li a', function() {
			var userid = userinfo.id;
			var meetingid = this.getAttribute("data-meetingId");
			var channel = this.getAttribute("data-channel");
			var meetingpwd = this.getAttribute("data-password");
			var meetingstatus = this.getAttribute("data-status");
			var btnArray = ['取消', '确认'];
			if(meetingstatus != 0) { //判断当前会议室是否公开
				mui.prompt('请输入会议室密码', '', '友情提示', function(e) {
					if(e.index == 1) {
						if(meetingpwd != e.value) {
							mui.toast('会议室密码错误', {
								icon: 2
							});
							return;
						}
						onPenView(meetingid, userid, channel);
					}
				}, 'div');

			} else {
				onPenView(meetingid, userid, channel);
			}
		});

		//	历史会议列表
		mui('body').on('tap', '#mui-home-list .mui-card-media a', function() {
			var userid = userinfo.id;
			var meetingid = this.getAttribute("data-meetingId");
			var meetingpwd = this.getAttribute("data-password");
			var meetingstatus = this.getAttribute("data-status");
			var btnArray = ['取消', '确认'];
			if(meetingstatus != 0) { //判断当前会议室是否公开
				mui.prompt('请输入会议室密码', '', '友情提示', function(e) {
					if(e.index == 1) {
						if(meetingpwd != e.value) {
							mui.toast('会议室密码错误', {
								icon: 2
							});
							return;
						}
						onPenView(meetingid, userid);
					}
				}, 'div');
			} else {
				onPenView(meetingid, userid);
			}
		});

	});

	//	安装新版本APP
	function installApp(path) {
		plus.nativeUI.showWaiting("APP安装中...");
		plus.runtime.install(path, {}, function() {
			plus.nativeUI.closeWaiting();
			console.log("安装成功！");
			plus.nativeUI.alert("应用资源更新完成！", function() {
				plus.runtime.restart();
			});
		}, function(e) {
			plus.nativeUI.closeWaiting();
			console.log("安装文件失败" + e.message);
			plus.nativeUI.alert("安装文件失败：" + e.message);
		});
	}

	//图像加载出错时的处理
	function errorImg(img) {
		img.src = "images/32noimg.png";
		img.onerror = null;
	}

	//	下拉刷新功能
	function pullrefresh() {
		initData();
		setTimeout(function() {
			mui('#refreshContainer').pullRefresh().endPulldown();
		}, 1000);
	}
</script>